﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>impression</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico" />
    <link rel="stylesheet" th:href="@{/assets/css/vendor/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/vendor/icofont.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/plugins/animate.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/swiper-bundle.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/nice-select.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/venobox.min.css}" />
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <!--        <link rel="stylesheet" th:href="@{/assets/css/typo.css}">-->
    <link rel="stylesheet" th:href="@{/assets/prism/prism.css}">

</head>

<body>

    <main class="main-wrapper" >
        <!-- Start Header Section  -->

        <header class="header-section sticky-header d-none d-lg-block">
            <div class="header-wrapper">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col">
                            <!-- Start Header Logo -->
                            <a href="index.html" class="header-logo">
                                <img src="assets/images/logo/logo.png" alt="">
                            </a>
                            <!-- End Header Logo -->
                        </div>

                        <div class="col-auto">
                            <!-- Start Header Menu -->
                            <ul class="header-nav">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="has-dropdown">
                                    <a th:href="@{/skill}">我的技能</a>
                                </li>
                                <li class="has-dropdown">
                                    <a th:href="@{/blog}">博客</a>
                                </li>
                                <li><a th:href="@{/project}">项目</a></li>
                                <li class="has-dropdown">
                                    <a href="#">其它</a>
                                    <ul class="submenu">
                                        <li><a th:href="@{/about}">关于我</a></li>
<!--                                        <li><a th:href="@{/contact}">联系我</a></li>-->
                                    </ul>
                                </li>
                            </ul>

                        </div>

                        <div class="col">
                            <div class="header-btn-link text-end">
                                <a th:href="@{about}" class="btn btn-sm btn-outline-one icon-space-left"> About Me <i class="icofont-double-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!--  Start Mobile Header Section  -->
        <div class="mobile-header d-block d-lg-none">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <div class="mobile-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mobile-action-link text-end">
                            <a href="#mobile-menu-offcanvas" class="offcanvas-toggle offside-menu"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  Start MobileHeader Section  -->

        <!-- End Header Section -->
        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-rightside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header text-end">
                <button class="offcanvas-close"><i class="icofont-close-line"></i></button>
            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">
                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>

                            <li><a th:href="@{/index}">首页</a></li>

                            <li>
                                <a th:href="@{skill}"><span>技能</span></a>

                            </li>
                            <li>
                                <a th:href="@{blog}" href="#"><span>博客</span></a>
                            </li>
                            <li><a th:href="@{/project}">项目</a></li>
                            <li>
                                <a th:href="@{about}"><span>关于我</span></a>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->
                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info text-center">
                    <ul class="social-link">
                        <li><a target="_blank" href="https://example.com"><i class="icofont-facebook"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-twitter"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-skype"></i></a></li>
                    </ul>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div>
        <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!-- Offcanvas Overlay -->
        <div class="offcanvas-overlay"></div>

        <!-- ...::: Start Hero Section :::... -->
        <div class="hero-section section-dark-blue-bg">
            <div class="hero-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-xxl-7">
                            <div class="hero-content">
                                <h3 class="title-big">你好，我是🐻</h3>
                                <h2 class="title-large">  <span class="shape-mark"></span></h2>
                                  <p>Keep pushing ahead & Keep pushing forward.</p>

                                <a th:href="@{https://itbear.oss-cn-beijing.aliyuncs.com/Resume.pdf}" class="btn btn-xl btn-outline-one icon-space-left">获取我的简历 <i class="icofont-download"></i></a>

<!--                                <div class="video-link">-->
<!--&lt;!&ndash;                                    <a class="wave-btn" href="https://youtu.be/MKjhBO2xQzg" data-autoplay="true" data-vbtype="video">&ndash;&gt;-->
<!--                                    <a class="wave-btn" href="https://www.bilibili.com/video/BV1Kw411Z7dF" data-autoplay="true" data-vbtype="video">-->

<!--                                        <div class="ripple"><i class="icofont-ui-play"></i></div>-->
<!--                                    </a>-->

<!--                                    <span class="video-text">查看我的视频介绍</span>-->
<!--                                </div>-->

                            </div>
                        </div>
                    </div>
                </div>

                <div class="hero-shape hero-top-shape">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="hero-shape hero-bottom-shape">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                <div class="hero-portrait">
                    <div class="image">
                        <img class="img-fluid" th:src="@{/assets/images/portrait/Bear12.png}" src="/assets/images/portrait/Bear8.png" alt="">

                        <div class="image-half-round-shape"></div>
                        <div class="social-link">
                            <a href="https://www.yuque.com/itbear" target="_blank"><svg t="1629797364919" class="icon" viewBox="0 0 1121 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="904" width="32" height="32"><path d="M1118.415339 145.958083l-91.292562-4.976133s-34.528264-123.607802-192.99438-134.698314c-158.466116-11.086281-262.152463-4.12562-262.152463-4.125619s117.54843 76.355702 70.440198 212.606942c-35.002182 73.48681-90.378579 133.530446-149.419372 202.536198L102.586182 871.931769c363.426909-5.437355 577.688331-8.158149 642.788496-8.158149 182.563967 0 336.853686-161.546579 330.540429-341.288199-4.341421-123.531636-42.885289-151.441983-56.133818-205.544727-13.244298-54.102744 13.269686-140.381091 98.63405-170.982611z" fill="#31CC79" p-id="905"></path><path d="M491.401521 418.769455C300.311273 638.976 0 989.336331 0 989.336331c540.265785 144.688661 789.186645-206.471405 828.166347-328.03967 52.257851-162.993719-21.580165-242.527207-63.369521-268.465719-141.692826-87.945521-246.822083-4.684165-273.395305 25.938513z" fill="#93E65C" p-id="906"></path><path d="M494.054612 413.687537c30.313785-32.70876 133.365421-108.793653 270.822611-23.137322 41.793587 26.040066 115.635835 105.89514 63.373752 269.55319-15.139967 47.417124-61.964694 129.616397-145.242975 203.902942-86.354512 0.592397-280.169785 3.143934-581.454281 7.663074l372.40595-434.637223c6.478281-7.582678 12.905785-15.055339 19.265587-22.447603z" fill="#60DB69" opacity=".86" p-id="907"></path></svg></a>
                            <a href="https://juejin.cn/user/1503787639900728" target="_blank"><svg t="1629797568153" class="icon" viewBox="0 0 1272 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2902" width="32" height="32"><path d="M709.64116346 165.27693991L614.32650882 90.125l-99.5625 78.52693991-5.17887982 4.16056009 104.74137982 83.50215546 105.09051681-83.50215546-9.77586217-7.53556009z m361.21228444 291.47198236l-456.78879244 360.19396555-456.49784537-359.99030128L90.125 511.12715547l523.93965547 413.11745671 524.23060335-413.35021555-67.44181092-54.14547436z m-456.78879244 29.21120673L365.4784479 290.00646554 298.06573237 344.12284454l315.96982772 249.16810336 316.28987101-249.40086136-67.41271556-54.14547436-248.84806007 196.21551682z" fill="#1296db" p-id="2903"></path></svg></a>
                            <a href="https://github.com/BearPessimist" target="_blank">
                                <svg t="1629954041762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1178" width="32" height="32"><path d="M511.543 14.057C228.914 13.943 0 242.743 0 525.143 0 748.457 143.2 938.286 342.629 1008c26.857 6.743 22.742-12.343 22.742-25.371v-88.572C210.286 912.23 204 809.6 193.6 792.457c-21.029-35.886-70.743-45.028-55.886-62.171 35.315-18.172 71.315 4.571 113.029 66.171 30.171 44.686 89.028 37.143 118.857 29.714 6.514-26.857 20.457-50.857 39.657-69.485C248.571 727.886 181.6 629.829 181.6 513.257c0-56.571 18.629-108.571 55.2-150.514-23.314-69.143 2.171-128.343 5.6-137.143 66.4-5.943 135.429 47.543 140.8 51.771C420.914 267.2 464 261.83 512.229 261.83c48.457 0 91.657 5.6 129.714 15.885 12.914-9.828 76.914-55.771 138.628-50.171 3.315 8.8 28.229 66.628 6.286 134.857 37.029 42.057 55.886 94.514 55.886 151.2 0 116.8-67.429 214.971-228.572 243.314a145.714 145.714 0 0 1 43.543 104v128.572c0.915 10.285 0 20.457 17.143 20.457 202.4-68.229 348.114-259.429 348.114-484.686 0-282.514-229.028-511.2-511.428-511.2z" p-id="1179"></path></svg>
                            </a>
                            <a href="https://gitee.com/Bear_Girls" target="_blank">

                                <svg t="1629954177589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5371" width="32" height="32"><path d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m259.1488-568.8832H480.4096a25.2928 25.2928 0 0 0-25.2928 25.2928l-0.0256 63.2064c0 13.952 11.3152 25.2928 25.2672 25.2928h177.024c13.9776 0 25.2928 11.3152 25.2928 25.2672v12.6464a75.8528 75.8528 0 0 1-75.8528 75.8528H366.592a25.2928 25.2928 0 0 1-25.2672-25.2928v-240.1792a75.8528 75.8528 0 0 1 75.8272-75.8528h353.9456a25.2928 25.2928 0 0 0 25.2672-25.2928l0.0768-63.2064a25.2928 25.2928 0 0 0-25.2672-25.2928H417.152a189.6192 189.6192 0 0 0-189.6192 189.6448v353.9456c0 13.9776 11.3152 25.2928 25.2928 25.2928h372.9408a170.6496 170.6496 0 0 0 170.6496-170.6496v-145.408a25.2928 25.2928 0 0 0-25.2928-25.2672z" fill="#C71D23" p-id="5372"></path></svg>

                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- ...::: End Hero Section :::... -->

        <!-- ...::: Start Service Display Section :::... -->
        <div class="service-display-section section-gap-tb-165 pos-relative">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <!-- Start Section Content -->
                        <div class="section-content">
                            <span class="section-tag">我的技能</span>
                            <h2 class="section-title"> 我会哪些技术 </h2>
                        </div>
                        <!-- End Section Content -->
                    </div>
                </div>
            </div>

            <!-- Start Service Section Wrapper -->
            <div class="service-display-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="service-display-slider">
                                <!-- Slider main container -->
                                <div class="swiper-container">
                                    <!-- Additional required wrapper -->
                                    <div class="swiper-wrapper">

                                        <div class="service-box-single-item swiper-slide" th:each="skill, index : ${skills}">
                                            <div class="inner-shape inner-shape-top-right"></div>
                                            <div class="icon"><img src="assets/images/icon/service-icon-1.png" alt=""></div>
                                            <h4 class="title"><a th:href="@{/skill/{skillId}/details(skillId = ${skill.id})}">[[ ${ skill.name } ]]</a></h4>
                                            <ul class="list-item" >
                                                <li th:text="${skill.getTagOne()}">Landing Pages</li>
                                                <li th:text="${skill.getTagTwo()}">User Flow</li>
                                                <li th:text="${skill.getTagThree()}">Wireframing</li>
                                                <li th:text="${skill.getTagFour()}">Prototyping</li>
                                                <li th:text="${skill.getTagFive()}">Mobile App Design</li>
                                             </ul>
                                            <div class="inner-shape inner-shape-bottom-right"></div>
                                        </div>

<!--                                        <div class="service-box-single-item swiper-slide">-->
<!--                                            <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                            <div class="icon"><img src="assets/images/icon/service-icon-1.png" alt=""></div>-->
<!--                                            <h4 class="title"><a th:href="@{/skill-details}">前端</a></h4>-->
<!--                                            <ul class="list-item" th:each="skill : ${skills}">-->
<!--                                                <li th:text="${skill.getName()}">Landing Pages</li>-->
<!--&lt;!&ndash;                                                <li>User Flow</li>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <li>Wireframing</li>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <li>Prototyping</li>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <li>Mobile App Design</li>&ndash;&gt;-->
<!--                                            </ul>-->
<!--                                            <div class="inner-shape inner-shape-bottom-right"></div>-->
<!--                                        </div>-->
<!--                                        <div class="service-box-single-item swiper-slide">-->
<!--                                            <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                            <div class="icon"><img src="assets/images/icon/service-icon-1.png" alt=""></div>-->
<!--                                            <h4 class="title"><a href="skill-details.html">数据结构</a></h4>-->
<!--                                            <ul class="list-item" th:each="skill : ${skills}">-->
<!--                                                <li th:text="${skill.getName()}">Landing Pages</li>-->
<!--&lt;!&ndash;                                                <li>User Flow</li>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <li>Wireframing</li>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <li>Prototyping</li>&ndash;&gt;-->
<!--&lt;!&ndash;                                                <li>Mobile App Design</li>&ndash;&gt;-->
<!--                                            </ul>-->
<!--                                            <div class="inner-shape inner-shape-bottom-right"></div>-->
<!--                                        </div>-->

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="service-display-dots">
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!-- End Service Section Wrapper -->
        </div>
        <!-- ...::: End Service Display Section :::... -->

        <!-- ...::: Start Skill Display Section :::... -->
        <div class="skill-display-section section-gap-tb-165 section-bg pos-relative">
            <div class="skill-display-section-box">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-6 col-xxl-5">
                            <!-- Start Section Content -->
                            <div class="section-content">
                                <span class="section-tag">特殊技能</span>
                                <h2 class="section-title">我的特殊技能></h2>

                                <a href="#" class="btn btn-xl btn-outline-one icon-space-left">获取我的简历 <i class="icofont-download"></i></a>
                            </div>
                            <!-- End Section Content -->
                        </div>

                        <div class="col-xl-6 col-xxl-6 offset-xxl-1">
                            <!-- Start Skill Display Wrapper -->
                            <div class="skill-display-wrapper">
                                <!-- Start Skill Progress Single Item -->
                                <div class="skill-progress-single-item">
                                    <span class="tag">划水</span>
                                    <div class="skill-box">
                                        <div class="progress-line" data-width="95">
                                            <span class="skill-percentage">95%</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- ENd Skill Progress Single Item -->
                                <!-- Start Skill Progress Single Item -->
                                <div class="skill-progress-single-item">
                                    <span class="tag">摸鱼</span>
                                    <div class="skill-box">
                                        <div class="progress-line" data-width="100">
                                            <span class="skill-percentage">100%</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- ENd Skill Progress Single Item -->

                                <!-- Start Skill Progress Single Item -->
                                <div class="skill-progress-single-item">
                                    <span class="tag">领导力</span>
                                    <div class="skill-box">
                                        <div class="progress-line" data-width="20">
                                            <span class="skill-percentage">20%</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- ENd Skill Progress Single Item -->
                                <!-- Start Skill Progress Single Item -->
<!--                                <div class="skill-progress-single-item">-->
<!--                                    <span class="tag">Flexibility</span>-->
<!--                                    <div class="skill-box">-->
<!--                                        <div class="progress-line" data-width="80">-->
<!--                                            <span class="skill-percentage">80%</span>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
                                <!-- ENd Skill Progress Single Item -->
                            </div>
                            <!-- End Skill Display Wrapper -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="skill-display-shape"></div>
        </div>
<!--         ...::: End Skill Display Section :::...-->


<!--         ...::: Start Counter Display Section :::...-->
<!--        <div class="counter-display-section section-gap-tb-165 section-bg-2">-->
<!--            <div class="counter-display-wrapper">-->
<!--                <div class="container">-->
<!--                    <div class="row justify-content-center justify-content-sm-start">-->
<!--                        <div class="d-block d-md-flex justify-content-md-start col-12 col-sm-4 col-md-4">-->
<!--                            &lt;!&ndash; Start Counterup Single Item &ndash;&gt;-->
<!--                            <div class="counterup-single-item">-->
<!--                                <div class="icon">-->
<!--                                    <img src="assets/images/icon/counterup-icon-1.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="content">-->
<!--                                    <h2 class="number"><span class="counter">2,58</span>+</h2>-->
<!--                                    <span class="text">Happy Clients</span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Counterup Single Item &ndash;&gt;-->
<!--                        </div>-->
<!--                        <div class="d-block d-md-flex justify-content-md-center col-12 col-sm-4 col-md-4">-->
<!--                            &lt;!&ndash; Start Counterup Single Item &ndash;&gt;-->
<!--                            <div class="counterup-single-item">-->
<!--                                <div class="icon">-->
<!--                                    <img src="assets/images/icon/counterup-icon-2.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="content">-->
<!--                                    <h2 class="number"><span class="counter">590</span>K</h2>-->
<!--                                    <span class="text">Project Complete</span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Counterup Single Item &ndash;&gt;-->
<!--                        </div>-->
<!--                        <div class="d-block d-md-flex justify-content-md-end col-12 col-sm-4 col-md-4">-->
<!--                            &lt;!&ndash; Start Counterup Single Item &ndash;&gt;-->
<!--                            <div class="counterup-single-item">-->
<!--                                <div class="icon">-->
<!--                                    <img src="assets/images/icon/counterup-icon-3.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="content">-->
<!--                                    <h2 class="number"><span class="counter">28</span>+</h2>-->
<!--                                    <span class="text">Years of Experience</span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Counterup Single Item &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- ...::: End Counter Display Section :::... -->

        <!-- ...::: Start Project Display Section :::... -->
        <div class="project-display-section section-gap-tb-165">
            <div class="project-display-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-xl-12 d-block d-md-flex justify-content-between">
                            <!-- Start Section Content -->
                            <div class="section-content pos-relative">
                                <span class="section-tag">项目实战</span>
                                <h2 class="section-title">我做过的项目</h2>
                            </div>
                            <!-- End Section Content -->
                            <div class="default-nav-style mt-6 mb-6 mb-md-0 ">
                                <!-- If we need navigation buttons -->
                                <div class="slider-button button-prev"><i class="icofont-double-left"></i></div>
                                <div class="slider-button button-next"><i class="icofont-double-right"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="project-display-wrapper">

                    <div class="project-display-slider">
                        <!-- Swiper -->
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <!-- Slides -->
                                <!-- Start Project Box Single Item -->
                                <div class="project-box-single-item swiper-slide" th:each="project : ${projects}">
                                    <div class="img-box">
                                        <div class="bg-overlay"></div>
                                        <div class="bg-image">
                                            <img th:src="${project.getCover()}" src="assets/images/project/project-slider-img-1.jpg" alt="">
                                        </div>
                                        <div class="image">
                                            <img th:src="${project.getCover()}" src="assets/images/project/project-slider-img-1.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="content">
                                        <h4 class="title"><a th:href=" @{ /project/{projectId}/details(projectId = ${project.getId()}) } ">[[${project.name}]]</a></h4>

                                        <ul class="catagory-nav-item">
                                            <li  th:each="tags : ${project.tag}" th:text="${tags.name}"><a href="">Gardeining</a></li>
                                        </ul>
                                    </div>
                                </div>

<!--                                <div class="project-box-single-item swiper-slide">-->
<!--                                    <div class="img-box">-->
<!--                                        <div class="bg-overlay"></div>-->
<!--                                        &lt;!&ndash; 项目图片背景 &ndash;&gt;-->
<!--                                        <div class="bg-image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                        &lt;!&ndash; 项目图片 &ndash;&gt;-->
<!--                                        <div class="image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="content">-->
<!--                                        <h4 class="title"><a href="project-details.html">谷粒商城项目</a></h4>-->

<!--                                    </div>-->
<!--                                </div>-->

<!--                                <div class="project-box-single-item swiper-slide">-->
<!--                                    <div class="img-box">-->
<!--                                        <div class="bg-overlay"></div>-->
<!--                                        &lt;!&ndash; 项目图片背景 &ndash;&gt;-->
<!--                                        <div class="bg-image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                        &lt;!&ndash; 项目图片 &ndash;&gt;-->
<!--                                        <div class="image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="content">-->
<!--                                        <h4 class="title"><a href="project-details.html">谷粒商城</a></h4>-->

<!--                                    </div>-->
<!--                                </div>-->


                                <!--                                <div class="project-box-single-item swiper-slide">-->
<!--                                    <div class="img-box">-->
<!--                                        <div class="bg-overlay"></div>-->
<!--                                        <div class="bg-image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                        <div class="image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="content">-->
<!--                                        <h4 class="title"><a href="project-details.html">SEOLLY - SEO Marketing & Digital Agency</a></h4>-->

<!--                                        <ul class="catagory-nav-item">-->
<!--                                            <li><a href="">Chairty</a></li>-->
<!--                                            <li><a href="">Fund Rising</a></li>-->
<!--                                            <li><a href="">Non Profit</a></li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </div>-->

<!--                                <div class="project-box-single-item swiper-slide">-->
<!--                                    <div class="img-box">-->
<!--                                        <div class="bg-overlay"></div>-->
<!--                                        <div class="bg-image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                        <div class="image">-->
<!--                                            <img src="assets/images/bear.png" alt="">-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="content">-->
<!--                                        <h4 class="title"><a href="project-details.html">Virtuf - Creative Agency Bootstrap 5 Template</a></h4>-->

<!--                                        <ul class="catagory-nav-item">-->
<!--                                            <li><a href="">Gardeining</a></li>-->
<!--                                            <li><a href="">Landscaping</a></li>-->
<!--                                            <li><a href="">Greem</a></li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- ...::: End Project Display Section :::... -->

        <!-- ...::: Start Testimonial Display Section :::... -->
<!--        <div class="testimonial-display-section section-gap-tb-165 section-bg">-->
<!--            <div class="testimonial-display-box d-flex flex-column align-items-center d-xl-block pos-relative">-->
<!--                <div class="container overflow-hidden">-->
<!--                    <div class="row">-->
<!--                        <div class="col d-xl-flex justify-content-xl-end">-->
<!--                            &lt;!&ndash; Start Section Content &ndash;&gt;-->
<!--                            <div class="section-content pos-relative">-->
<!--                                <span class="section-tag">Testimonial</span>-->
<!--                                <h2 class="section-title">Satisfied Clients Say</h2>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Section Content &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="testimonial-display-wrapper">-->
<!--                        <div class="row">-->
<!--                            <div class="col-12">-->
<!--                                <div class="testimonial-display-slider">-->
<!--                                    &lt;!&ndash; Swiper &ndash;&gt;-->
<!--                                    <div class="swiper-container">-->
<!--                                        <div class="swiper-wrapper">-->
<!--                                            &lt;!&ndash; Start testimonial Slider Single Item &ndash;&gt;-->
<!--                                            <div class="testimonial-slider-single-item swiper-slide">-->
<!--                                                <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                                <div class="content">-->
<!--                                                    <span class="icon">“</span>-->
<!--                                                    <p class="text">Lorem Ipsum simpy dummy-->
<!--                                                        text of the printing and types-->
<!--                                                        industry has been the industr-->
<!--                                                        standard dummy.</p>-->
<!--                                                    <div class="info">-->
<!--                                                        <div class="author">-->
<!--                                                            <h4 class="name">Raleigh Friend</h4>-->
<!--                                                            <span class="designation">CEO, Seoly</span>-->
<!--                                                        </div>-->
<!--                                                        <ul class="review">-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="blank"><i class="icofont-star"></i></li>-->
<!--                                                        </ul>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End testimonial Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start testimonial Slider Single Item &ndash;&gt;-->
<!--                                            <div class="testimonial-slider-single-item swiper-slide">-->
<!--                                                <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                                <div class="content">-->
<!--                                                    <span class="icon">“</span>-->
<!--                                                    <p class="text">Lorem Ipsum simpy dummy-->
<!--                                                        text of the printing and types-->
<!--                                                        industry has been the industr-->
<!--                                                        standard dummy.</p>-->
<!--                                                    <div class="info">-->
<!--                                                        <div class="author">-->
<!--                                                            <h4 class="name">Raleigh Friend</h4>-->
<!--                                                            <span class="designation">CEO, Seoly</span>-->
<!--                                                        </div>-->
<!--                                                        <ul class="review">-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="blank"><i class="icofont-star"></i></li>-->
<!--                                                        </ul>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End testimonial Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start testimonial Slider Single Item &ndash;&gt;-->
<!--                                            <div class="testimonial-slider-single-item swiper-slide">-->
<!--                                                <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                                <div class="content">-->
<!--                                                    <span class="icon">“</span>-->
<!--                                                    <p class="text">Lorem Ipsum simpy dummy-->
<!--                                                        text of the printing and types-->
<!--                                                        industry has been the industr-->
<!--                                                        standard dummy.</p>-->
<!--                                                    <div class="info">-->
<!--                                                        <div class="author">-->
<!--                                                            <h4 class="name">Raleigh Friend</h4>-->
<!--                                                            <span class="designation">CEO, Seoly</span>-->
<!--                                                        </div>-->
<!--                                                        <ul class="review">-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="fill"><i class="icofont-star"></i></li>-->
<!--                                                            <li class="blank"><i class="icofont-star"></i></li>-->
<!--                                                        </ul>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End testimonial Slider Single Item &ndash;&gt;-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="default-nav-style mt-5 mt-xl-0">-->
<!--                    &lt;!&ndash; If we need navigation buttons &ndash;&gt;-->
<!--                    <div class="slider-button button-prev"><i class="icofont-double-left"></i></div>-->
<!--                    <div class="slider-button button-next"><i class="icofont-double-right"></i></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- ...::: End Testimonial Display Section :::... -->


<!--        以后可以改为我工作过的公司-->
        <!-- ...::: Start Company Logo Display Section :::... -->
<!--        <div class="company-logo-display section-mt-165 ">-->
<!--            <div class="company-logo-display-box">-->
<!--                <div class="container">-->
<!--                    <div class="row">-->
<!--                        <div class="col">-->
<!--                            &lt;!&ndash; Start Section Content &ndash;&gt;-->
<!--                            <div class="section-content pos-relative">-->
<!--                                <span class="section-tag">Favourite Clients</span>-->
<!--                                <h2 class="section-title">Work With Trusted Comapny.</h2>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; End Section Content &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="company-logo-display-wrapper">-->
<!--                        <div class="row">-->
<!--                            <div class="col">-->
<!--                                <div class="company-logo-display-slider">-->
<!--                                    &lt;!&ndash; Slider main container &ndash;&gt;-->
<!--                                    <div class="swiper-container">-->
<!--                                        &lt;!&ndash; Additional required wrapper &ndash;&gt;-->
<!--                                        <div class="swiper-wrapper">-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-1.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/1.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-2.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/2.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-3.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/3.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            &lt;!&ndash; Start Company Logo Slider Single Item &ndash;&gt;-->
<!--                                            <div class="company-logo-single-item swiper-slide">-->
<!--                                                <a href="#" class="image">-->
<!--                                                    <img src="assets/images/company-logo/company-logo-4.png" alt="">-->
<!--                                                    <img src="assets/images/company-logo/4.png" alt="">-->
<!--                                                </a>-->
<!--                                            </div>-->
<!--                                            &lt;!&ndash; End Company Logo Slider Single Item &ndash;&gt;-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- ...::: End Company Logo Display Section :::... -->

        <!-- ...::: Start Blog Feed Display Section :::... -->
        <div class="blog-feed-display-section section-gap-tb-165">
            <div class="blog-feed-display-box">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <!-- Start Section Content -->
                            <div class="section-content pos-relative text-center">
                                <span class="section-tag">博客</span>
                                <h2 class="section-title">我的博客</h2>
                            </div>
                            <!-- End Section Content -->
                        </div>
                    </div>

                    <div class="blog-feed-display-wrapper">
                        <div class="row mb-n5">
                            <div class="col-12 mb-5" th:each="blog : ${blogs}">
                                <!-- Start Blog Feed Single Item -->
                                <div class="blog-feed-single-item" >
                                    <div class="inner-shape inner-shape-top-right"></div>
                                    <a href="blog-details.html" th:href="@{ /blog/{blogId}/details(blogId = ${ blog.id }) }" class="image">
                                        <img th:src="${blog.getCover()}" src="assets/images/blog/blog-feed-img-1.jpg" alt="">
                                    </a>
                                    <div class="content-box">
                                        <div class="content">
                                            <div class="post-meta">
                                                <a class="catagory">[[ ${ blog.category.name } ]]</a>
                                                <a class="date" th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd HH:mm')}">2021-10-4 22:22</a>
                                            </div>
                                            <h4 class="title"><a href="blog-details.html" th:href="@{ /blog/{blogId}/details(blogId = ${ blog.id }) }"> [[ ${ blog.title } ]] </a></h4>
                                        </div>
                                        <a href="blog-details.html" th:href="@{ /blog/{blogId}/details(blogId = ${ blog.getId() }) }" class="btn btn-md btn-outline-one icon-space-left">Read More<i class="icofont-double-right"></i></a>
                                    </div>
                                </div>
                                <!-- End Blog Feed Single Item -->
                            </div>

<!--                            <div class="col-12 mb-5">-->
<!--                                &lt;!&ndash; Start Blog Feed Single Item &ndash;&gt;-->
<!--                                <div class="blog-feed-single-item">-->
<!--                                    <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                    <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                        <img src="assets/images/blog/blog-feed-img-2.jpg" alt="">-->
<!--                                    </a>-->
<!--                                    <div class="content-box">-->
<!--                                        <div class="content">-->
<!--                                            <div class="post-meta">-->
<!--                                                <a href="#" class="catagory">Business</a>-->
<!--                                                <a href="#" class="date">07 February, 2021</a>-->
<!--                                            </div>-->
<!--                                            <h4 class="title"><a href="blog-details.html">Don't wait until you officially started-->
<!--                                                    business to line these up.</a></h4>-->
<!--                                        </div>-->
<!--                                        <a href="blog-details.html" class="btn btn-md btn-outline-one icon-space-left">Read More<i class="icofont-double-right"></i></a>-->
<!--                                    </div>-->

<!--                                </div>-->
<!--                                &lt;!&ndash; End Blog Feed Single Item &ndash;&gt;-->
<!--                            </div>-->

<!--                            <div class="col-12 mb-5">-->
<!--                                &lt;!&ndash; Start Blog Feed Single Item &ndash;&gt;-->
<!--                                <div class="blog-feed-single-item">-->
<!--                                    <div class="inner-shape inner-shape-top-right"></div>-->
<!--                                    <a href="blog-details-sidebar-left.html" class="image">-->
<!--                                        <img src="assets/images/blog/blog-feed-img-3.jpg" alt="">-->
<!--                                    </a>-->
<!--                                    <div class="content-box">-->
<!--                                        <div class="content">-->
<!--                                            <div class="post-meta">-->
<!--                                                <a href="#" class="catagory">Business</a>-->
<!--                                                <a href="#" class="date">07 February, 2021</a>-->
<!--                                            </div>-->
<!--                                            <h4 class="title"><a href="blog-details-sidebar-left.html">Don't wait until you officially started-->
<!--                                                    business to line these up.</a></h4>-->
<!--                                        </div>-->
<!--                                        <a href="blog-details-sidebar-left.html" class="btn btn-md btn-outline-one icon-space-left">Read More<i class="icofont-double-right"></i></a>-->
<!--                                    </div>-->

<!--                                </div>-->
<!--                                &lt;!&ndash; End Blog Feed Single Item &ndash;&gt;-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Blog Feed Display Section :::... -->

    <span th:replace="~{common::footer}"></span>

        <!-- material-scrolltop button -->
    <button class="material-scrolltop" type="button"></button>
    </main>

    <script th:src="@{assets/js/vendor/bootstrap.bundle.min.js}"></script>
    <script th:src="@{assets/js/vendor/jquery-3.5.1.min.js}"></script>
    <script th:src="@{assets/js/vendor/jquery-migrate-3.3.0.min.js}"></script>
    <script th:src="@{assets/js/vendor/modernizr-3.11.2.min.js}"></script>
    <script th:src="@{assets/js/plugins/swiper-bundle.min.js}"></script>
    <script th:src="@{assets/js/plugins/jquery.appear.min.js}"></script>
    <script th:src="@{assets/js/plugins/jquery.nice-select.js}"></script>
    <script th:src="@{assets/js/plugins/venobox.min.js}"></script>
    <script th:src="@{assets/js/plugins/jquery.waypoints.js}"></script>
    <script th:src="@{assets/js/plugins/images-loaded.min.js}"></script>
    <script th:src="@{assets/js/plugins/isotope.pkgd.min.js}"></script>
    <script th:src="@{assets/js/plugins/counter.js}"></script>
    <script th:src="@{assets/js/plugins/ajax-mail.js}"></script>
    <script th:src="@{assets/js/plugins/material-scrolltop.js}"></script>
    <script th:src="@{assets/js/main.js}"></script>

</body>



</html>
